<template>
  <div class="btn-content">
    <div 
      v-for="(item,index) in props.btnList" 
      :key="index" 
      class="btn-item van-haptics-feedback"
      :class="{ active: item.isActive == true }" 
      @click="btnClick(item)">
      <ClickableBox>
        {{item.name}}
      </ClickableBox>
      
    </div>
  </div>
</template>

<script setup lang="ts">
 import ClickableBox from '../../../components/ClickableBox.vue';
interface Props {  
  btnList: Array<any>;
} 
const props = defineProps<Props>();  
const emit = defineEmits();
const btnClick = (clickedItem:any) => {
  emit('btnClick', clickedItem);
  
}

</script>

<style scoped lang="less">
.btn-content{
  width: 100%;
  height: 100%;
  background-color:aqua;
  border-radius: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .btn-item{
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
  }
  .active{
    border-radius: 5rem;
    background-color: lightgreen; 
    color: white; 
  }
}
</style>